<template>
  <div class="libaryWrapper">
    <div class="flex-line split radio">
      <el-radio-group v-model="statusName" style="margin-bottom: 30px;" @input="handleClick">
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button label="1">进行中</el-radio-button>
        <el-radio-button label="2">预约中</el-radio-button>
        <el-radio-button label="3">已结束</el-radio-button>
      </el-radio-group>
      <div class="flex-line  center">
        <el-input v-model="searchVal" class="mr-20" placeholder="请输入内容" clearable />
        <el-button class="gradientVertical" size="large" round @click="searchFun()">搜索</el-button>
        <el-button class="gradientVertical" size="large" round @click="handleFun('add')">添加</el-button>
      </div>
    </div>
    <!--list-->
    <el-row v-if="list.length>0" v-loading="loading" class="teachers-list flex-line wrap" :gutter="20">
      <el-col v-for="(item,index) in list" :key="item.id" :span="6" class="item pr-20">
        <div class="media">
          <img v-if="item.cover && item.cover!==&quot;&quot;" class="img-size w100 " :src="item.cover">
          <div v-else class="img-size w100 img-null">
            <i class="el-icon-picture-outline" />
          </div>
          <span v-if="item.status===0" class="a">预约中</span>
          <span v-if="item.status===1" class="b">签到中</span>
          <span v-if="item.status===2" class="c">已结束</span>
          <div v-if="item.createdBy === user.id" class="btn-box">
            <el-button icon="el-icon-edit" circle @click="handleFun('edit',index)" />
            <el-button icon="el-icon-delete" circle @click="deleteFun(item.id)" />
          </div>
        </div>
        <p class="title ellipsis_one">{{ item.title }}</p>
        <!-- <p class="ellipsis_one">{{item.content}}</p> -->
        <div class="flex-line split tip pt-5">
          <span><i class="el-icon-time pr-5" style="font-size: 14px" />开课时间 {{ item.beginAt }}</span>
          <span style="display: flex;align-items: center"><img class="pr-5" src="@/assets/baoming.png">{{ item.visitorCount?item.visitorCount:0 }}人已报名</span>
        </div>
        <div class=" flex-line split pt-10">
          <div class="flex-line center">
            <el-avatar class="mr-10" :src="item.staffHeadImg" icon="el-icon-user-solid" />
            {{ item.staffName }}
          </div>
          <div>
            <el-button v-if="item.createdBy === user.id" class="gradientBtn" size="large" round @click="signFun(index,'edit')">签到</el-button>
            <el-button v-else :class="item.booked? 'aa':'gradientBtn'" size="large" round @click="subscribeFun(index)">{{ item.booked?'取消预约':'预约报名' }}</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--/list-->
    <empty v-if="!loading && list.length<=0" />
    <Pagination :total="pagination.total" :page-num="pagination.pageNum" :page-size="pagination.pageSize" @paginationFun="paginationFun" />
    <!--新增弹窗-->
    <add-dialog ref="addDialogRef" @addFun="addFun" />
    <!--/新增弹窗-->
    <!--签到-->
    <sign-dialog ref="signDialog" />
    <!--/签到-->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getOtCourseList, docSubmit, deleteRequest, signRequest } from './api'
import Pagination from '@/components/Basic/PaginationTwo'
import addDialog from './components/addDialog'
import signDialog from './components/signDialog'
import dayjs from 'dayjs'
export default {
  components: {
    Pagination, addDialog, signDialog
  },
  data () {
    return {
      statusName: '',
      loading: true,
      list: [],
      pagination: {
        total: 0,
        pageSize: 12,
        pageNum: 1
      },
      searchVal: '',
      editObj: {}
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  created () {
    this.getData()
  },
  methods: {
    // 签名-去组件
    signFun (index, type) {
      const obj = this.list[index]
      this.$refs.signDialog.mainFun(this.user.id, obj, type)
    },
    // 预约
    subscribeFun (index) {
      const obj = this.list[index]
      console.log(obj)
      const data = {}
      data.offlineCourseId = obj.id
      data.booked = !obj.booked
      signRequest(data, 'post').then(() => {
        this.$message.success(`${obj.booked ? '取消预约' : '预约成功'}`)
        this.getData()
      })
    },
    // tab切换
    handleClick (tab, event) {
      this.pagination.pageNum = 1
      this.getData()
    },
    // 搜索
    searchFun () {
      this.pagination.pageNum = 1
      this.getData()
    },
    // 新增 编辑
    handleFun (type, index) {
      this.editObj = {}
      if (type === 'edit') {
        this.editObj = this.list[index]
        this.$refs.addDialogRef.mainEditFun(type, this.editObj)
      } else {
        const obj = {
          title: '',
          cover: '',
          beginAt: '',
          content: '',
          id: null
        }
        this.$refs.addDialogRef.mainEditFun(type, obj)
      }
    },
    // 删除
    deleteFun (id) {
      const form = new FormData()
      form.append('id', id)
      this.$confirm('确认关闭？')
        .then(_ => {
          console.log(_)
          if (_ === 'confirm') {
            deleteRequest(form, 'delete').then(() => {
              this.$message.success('删除成功')
              this.getData()
            })
          }
          // done()
        })
        .catch(_ => { })
    },
    // 子组件返回
    addFun (type, form) {
      const data = {
        ...form
      }
      data.beginAt = form.beginAt.replace(/-/g, '/')
      docSubmit(data, 'post').then(() => {
        this.$message.success(`${type === 'add' ? '添加' : '编辑'}成功`)
        this.getData()
      })
    },
    // 分页
    paginationFun (val) {
      this.pagination.pageNum = val
      this.getData()
    },
    // 获取数据
    getData () {
      this.loading = true
      const prams = {
        // audited: '', // 审核状态 0.待审核 1.审核通过 2.审核拒绝
        // beginAt: '',
        // content: '',
        // cover: '',
        // createdBy: '',
        // id: '',
        pageNum: this.pagination.pageNum - 1,
        pageSize: this.pagination.pageSize,
        // shortDesc: '',
        // status: '',  //'开课状态，0.预约中 1.签到中 2.已结束'
        title: this.searchVal
      }
      if (this.statusName !== '' && this.statusName > 0) {
        prams.status = Number(this.statusName) - 1
      } else {
        delete prams.status
      }
      getOtCourseList(prams).then(res => {
        this.loading = false
        this.pagination.total = res.totalElements
        res.content.map(item => {
          item.beginAt = dayjs(item.beginAt).format('YYYY-MM-DD HH:mm')
        })
        this.list = res.content
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
<style lang='scss' scoped>
@import "../../scss/list.scss";
@import "../../scss/elementReset.scss";
.radio{
  ::v-deep{
    .el-radio-button{
      padding: 2px;
      background-color: #EEF1F4;
    }
    .el-radio-button__inner{
      border: 0 !important;
      background-color: #EEF1F4;
      box-shadow: none;
    }
    .is-active .el-radio-button__inner{
      background-color: #fff !important;
      color: #000000;
    }
  }
}
.aa{
  background-color: #DEE4EA;
}
.media{
  ::v-deep{
    .a{
      background: linear-gradient( 90deg, #FFB21A 0%, #FF8000 100%) !important;
      border-radius: 4px 0px 15px 0px !important;
      top: 0 !important;
    }
    .b{
      background: linear-gradient( 90deg, #7EE517 0%, #14CC14 100%) !important;
      border-radius: 4px 0px 15px 0px !important;
      top: 0 !important;
    }
    .c{
      background: linear-gradient( 90deg, #BDBDBD 0%, #8A8A8A 100%) !important;
      border-radius: 4px 0px 15px 0px !important;
      top: 0 !important;
    }
  }
}
</style>
